<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
    <div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-name flex-row align-start-row align-center-row" @touchstart.stop @click="show('showShop')">
                <em class="ui-header-address-icon"></em>
                <i class="flex1">{{public_agent_info.agent_name|formatText}}</i>
            </div>
            <div class="ui-header-title">首页</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleSearch">
                <em class="ui-header-search-icon"></em>
            </div>
        </div>
        <div class="ui-mode-content flex1" id="container" ref="scroll">
            <template v-if="pageStatus">
                <div class="ui-banner-container" v-if="getBannerList&&getBannerList.length">
                    <van-swipe :autoplay="4000" @change="onChange">
                        <van-swipe-item
                            :key="`banner-${i}`"
                            :title="item.title_4_page_link_wc"
                            v-for="(item, i) in getBannerList">
                            <img class="banner-img app-image auto" :src="item.img_4_page_link_wc"/>
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="mt-index-hot flex-row align-stretch" v-if="getHotList&&getHotList.length">
                    <div class="item flex1 flex-col align-center"
                        :key="`hot-${i}`"
                        v-for="(item,i) in getHotList"
                        @click="goPage(item)">
                        <span :title="item.title_4_page_link_wc">
                            <img class="app-image" @mousedown.prevent v-lazy.container="formatImgUrl(item.img_4_page_link_wc)" :alt="item.desc_4_page_link_wc">
                        </span>
                        <i>{{item.title_4_page_link_wc|formatText}}</i>
                    </div>
                </div>
                <div class="mt-index-row" v-if="getGridList&&getGridList.length">
                    <div class="flex-row align-stretch"
                        :key="`grid-${i}`"
                        v-for="(items,i) in getGridList">
                        <div class="item flex-row align-stretch"
                            :class="{m:items.length!=2,flex1:items.length==2}"
                            @click="goPage(item)"
                            :key="`grid-${i}-${j}`"
                            v-for="(item,j) in items">
                            <div class="box" :title="item.title_4_page_link_wc">
                                <img class="app-image" @mousedown.prevent v-lazy.container="formatImgUrl(item.img_4_page_link_wc)" :alt="item.desc_4_page_link_wc">
                            </div>
                            <div class="flex1">
                                <h3>{{item.title_4_page_link_wc|formatText}}</h3>
                                <p>{{item.desc_4_page_link_wc|formatText}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <div class="share gradient flex-row align-center" v-if="pageStatus&&!isLogin">
            <span>登录体验更多功能</span>
            <a href="javascript:;" @click="goLogin">登录</a>
        </div>
        <transition name="app_dialog">
            <div class="mt-master-container" @touchstart.prevent v-if="showShop">
                <div class="mt-master-content city">
                    <div class="info">
                        <h3>{{public_agent_info.agent_name|formatText}}</h3>
                        <p>联系电话：{{public_agent_info.agent_tel|formatText}}</p>
                        <p>{{public_agent_info.agent_city|formatText}}{{public_agent_info.agent_country|formatText}}{{public_agent_info.agent_addr|formatText}}</p>
                        <p class="flex-row">
                            <span class="flex1" :class="{line:public_agent_info.is_send_2_home!=1}">{{dictionary.is_send_2_home[public_agent_info.is_send_2_home]||'-'}}配送</span>
                            <span class="flex1" v-if="public_agent_info.is_send_2_home!=1">运费{{public_agent_info.money_4_send|formatText}}元</span>
                        </p>
                    </div>
                    <p class="m" v-if="public_agent_info.is_send_2_home!=1">订单满{{public_agent_info.money_4_free_send|formatText}}元，免运费</p>
                    <div class="change gradient" @touchstart.stop @click="goAgentList">切换门店</div>
                    <span class="close flex-col align-center" @touchstart.stop @click="close('showShop')">
                        <i class="iconfont iconguanbi1"></i>
                    </span>
                </div>
            </div>
        </transition>
        <transition name="app_dialog">
            <div class="mt-master-container" @touchstart.prevent v-if="showDiscount&&discountInfo.length">
                <div class="mt-master-content discount-content">
                    <h3 class="title">恭喜你获得了优惠券</h3>
                    <div class="body" ref="coupon">
                        <div class="box flex-row align-stretch" :key="i" v-for="(item,i) in discountInfo">
                            <div class="num">
                                <p class="m1"><i>&yen;</i>{{item.consume_score|formatText}}</p>
                                <p class="m2">满{{item.key_4_use_rule|formatText}}可用</p>
                            </div>
                            <div class="flex1 inner">
                                <p class="m1">{{item.score_remark|formatText}}</p>
                                <p class="m2">{{item.time_begin|formatDate2}}至{{item.time_end|formatDate2}}可用</p>
                                <span class="tip">{{dictionary.discount[item.score_type]||'-'}}</span>
                            </div>
                        </div>
                    </div>
                    <span class="close flex-col align-center" @touchstart.stop @click="close('showDiscount',true)">
                        <i class="iconfont iconguanbi1"></i>
                    </span>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import mixinCommon from '../mixins/common';
import mixinRequest from '../mixins/request';
import mixinShare from '../mixins/share';
import {
    LocalStorage
} from '@/utils/storage';
import {
    getDateInfo
} from '@/utils/tool';

export default {
    data(){
        return {
            public_agent_info:{},
            public_user_info:{},
            frontpage_4_weichat_arr:null,
            showShop:false,
            showDiscount:false,
            discountInfo:[]
        };
    },
    mixins:[
        mixinCommon,
        mixinRequest,
        mixinShare
    ],
    computed:{
        getBannerList(){
            return this.frontpage_4_weichat_arr&&this.frontpage_4_weichat_arr[0];
        },
        getHotList(){
            return this.frontpage_4_weichat_arr&&this.frontpage_4_weichat_arr[1];
        },
        getGridList(){
            let list=this.frontpage_4_weichat_arr&&this.frontpage_4_weichat_arr[2],
                res=[];
            if(list&&list.length){
                list.forEach((item,i)=>{
                    if(i%2==0){
                        res.push([]);
                    };
                    res[res.length-1].push(item);
                });
            };
            return res;
        }
    },
    watch:{
    },
    created(){
    },
    mounted(){
        this.init();
    },
    methods:{
        /*
         * 初始化
         */
        init(){
            this.showLoading();
            this.handleMockLogin().then(()=>{
                this.getPageInfo({
                    name:'home',
                    param:{
                        invoke_method:'content_frontpage_4_weichat'
                    }
                }).then(({result,response})=>{
                    if(result.unfinish_order_4_user){
                        this.public_agent_info=result.public_agent_info||{};
                        this.public_user_info=result.public_user_info||{};
                        this.frontpage_4_weichat_arr=result.frontpage_4_weichat_arr||[];
                        document.title=this.public_agent_info.application_name;
                        localStorage.setItem('id_public_agent_info',this.public_agent_info.id_public_agent_info);
                        this.setState({
                            key:'unfinish_order_4_user',
                            value:result.unfinish_order_4_user
                        });
                        this.setState({
                            key:'public_agent_info',
                            value:this.public_agent_info
                        });
                        this.setState({
                            key:'public_user_info',
                            value:this.public_user_info
                        });
                        this.getDiscountInfo();
                    }else{
                        this.$$message({
                            content:'获取订单号失败！',
                            buttonText:'重新加载',
                            sure:(node,close)=>{
                                this.handleRefresh();
                            }
                        });
                    };
                });
            }).catch(({msg})=>{
                this.showResult(msg,true);
            });
        },

        /*
         * APP和H5使用特殊账号模拟登录 H5即非APP&非微信&非小程序,默认即H5
         */
        handleMockLogin(){
            return new Promise((resolve,reject)=>{
                if(!this.isLogin){
                    this.$http.post({
                        name:'login',
                        data:{
                            invoke_method:'login_by_password',
                            pre_cmd_para_need_pic_code:false,
                            user_phone:'x-teamer',
                            password_user:'jlt110'
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result,response})=>{
                        resolve({result,response});
                    }).catch(({msg})=>{
                        reject({msg});
                    });
                }else{
                    resolve();
                };
            });
        },
        /*
         * 请求失败刷新
         */
        handleRefresh(){
            this.init();
        },
        /*
         * 获取优惠券信息
         */
        getDiscountInfo(){
            let old_coupon=LocalStorage.read('__home_coupon__');
            if(old_coupon){
                return;
            };
            this.getPageInfo({
                flag:false,
                name:'home.discount',
                param:{
                    invoke_method: 'score_list_4_one_user',
                    id_public_agent_info_list:this.public_user_info.id_public_agent_info,
                    pre_db_para_begin_idx:0,
                    pre_db_para_length_4_list:10,
                    pre_db_para_is_online:0,
                    type_4_score_display:2
                }
            }).then(({result,response})=>{
                let new_coupon=[];
                if(result.public_score_list&&result.public_score_list.length){
                    new_coupon=result.public_score_list.filter(item=>{
                        return new Date(item.time_end).getTime()>new Date().getTime();
                    });
                };
                let now=getDateInfo(),
                    tomorrow=new Date(now.year,now.month-1,now.day+1,0,0,0),
                    expire=tomorrow.getTime()-new Date().getTime();
                if(new_coupon.length){
                    this.discountInfo=new_coupon;
                    LocalStorage.set('__home_coupon__',new_coupon,expire);
                    this.showDiscount=true;
                    this.handleCouponAttachEvent();
                };
            });
        },
        /*
         * 添加滚动事件
         */
        handleCouponAttachEvent(){
            if(this.showDiscount){
                this.$nextTick(()=>{
                    this.handleAttachEvent(this.$refs.coupon);
                });
            };
        },
        /*
         * 解除滚动事件
         */
        handleCouponDetachEvent(){
            this.handleDetachEvent(this.$refs.coupon);
        },
        /*
         * 跳转
         */
        goPage(item){
            if(!this.isLogin){
                this.goLogin();
            }else{
                if(item.title_4_page_link_wc=='领券中心'){
                    this.$router.push({
                        path:item.url_4_page_link_wc,
                        query:{
                        }
                    });
                }else{
                    if(item.url_4_page_link_wc&&item.url_4_page_link_wc!='#'){
                        this.showMessage(`${item.title_4_page_link_wc}-跳转到<br/>${item.url_4_page_link_wc}`);
                    };
                }
            };
        },
        goAgentList(){
            this.$router.push({
                path:'/home/agent'
            });
        },
        /*
         * 打开弹窗
         */
        show(key,type){
            this[key]=true;
        },
        /*
         * 关闭弹窗
         */
        close(key,flag){
            if(flag){
                this.handleCouponDetachEvent();
            };
            this[key]=false;
        }
    },
    components:{
    },
    beforeDestroy(){
        this.handleCouponDetachEvent();
    }
}
</script>
<style lang="less" scoped>
.ui-banner-container{
	position:relative;
    width:100%;
	height:7.2rem;
	background-color:#ececec;
    .banner-img{
        height:100%;
    }
}
.mt-index-hot{
    background:#fff;
    .item{
        padding-top:0.5rem;
        span{
            position:relative;
            height:3rem;
            background:#f3f3f3;
            width:3rem;
            border-radius:50%;
            overflow:hidden;
        }
        i{
            font-size:0.7rem;
            line-height:2rem;
            color:#333;
            text-align:center;
        }
        &:active{
            background:#f9f9f9;
        }
    }
}
.mt-index-row{
    padding:0.25rem;
    position:relative;
    background:#fafafa;
    .item{
        position:relative;
        background:#fff;
        padding:0.5rem;
        margin:0.25rem;
        &.m{
            width:9.25rem;
        }
        .box{
             width:3.5rem;
             background:#f9f9f9;
             overflow:hidden;
             margin-right:0.5rem;
             overflow:hidden;
             position:relative;
        }
        h3{
            font-size:0.8rem;
            font-weight:normal;
            line-height:1.4rem;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
            color:#333;
        }
        p{
            font-size:0.6rem;
            color:#787878;
            line-height:1rem;
            height:2rem;
            overflow:hidden;
        }
    }
}
.share{
    color:#fff;
    padding:0.4rem 0;
    span{
        margin-right:0.5rem;
        line-height:1.6rem;
        font-size:0.7rem;
    }
    a{
        position:relative;
        padding:0 1rem;
        background:#f00;
        color:#fff;
        border-radius:1rem;
        height:1.6rem;
        line-height:1.6rem;
        font-size:0.7rem;
        cursor:pointer;
        text-align:center;
        &:active{
            background:#e00000;
        }
    }
}
.mt-master-container{
    position:fixed;
    z-index:99999999;
    background-color:rgba(0,0,0,0.3);
    left:50%;
    width:100%;
    max-width:20rem;
    top:0;
    bottom:0;
    transform:translateX(-50%);
    .mt-master-content{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border-radius:0.2rem;
        margin-top:-1rem;
        &.city{
            background-color:#fff;
            width:16rem;
            .info{
                text-align:center;
                padding:0.5rem;
                h3{
                    font-size:1rem;
                    line-height:2rem;
                    margin-bottom:0.3rem;
                    font-weight:normal;
                }
                p{
                    color:#9b9b9b;
                    line-height:1.2rem;
                    font-size:0.8rem;
                    padding:0.2rem 0;
                    span{
                        text-align:center;
                        color:@base-color;
                        position:relative;
                        &.line{
                            &:after{
                                content:'';
                                position:absolute;
                                right:0;
                                top:0.2rem;
                                bottom:0.2rem;
                                width:1px;
                                background-color:@base-color;
                            }
                        }
                    }
                }
            }
            p{
                &.m{
                    border-top:solid 1px #f2f3f7;
                    line-height:2.4rem;
                    color:@base-color;
                    font-size:0.9rem;
                    text-align:center;
                }
            }
            .change{
                position:relative;
                z-index:1;
                color: #fff;
                text-align: center;
                line-height: 1.5rem;
                font-size: 0.6rem;
                border-radius:0 0 0.2rem 0.2rem;
                &:active{
                    background-color:@base-active-color;
                }
            }
        }
        &.discount-content{
            width:18rem;
            background-color:@base-color;
            padding:0.8rem;
            .title{
                text-align: center;
                color:#fff;
                padding-top:0.4rem;
                font-size: 1.01rem;
                font-weight:normal;
            }
            .body{
                position:relative;
                overflow-y:auto;
                overflow-x:hidden;
                max-height:13.5rem;
                margin-top:0.5rem;
                border-radius:0.2rem;
                .box{
                    background-color:#fff;
                    border-radius:0.2rem;
                    margin-top:0.5rem;
                    padding:0.5rem 0.5rem 0.5rem 0;
                    position:relative;
                    &:first-child{
                        margin-top:0;
                    }
                    .num{
                        position:relative;
                        padding:0 0.8rem;
                        margin-right:0.8rem;
                        &:after{
                            position:absolute;
                            content:'';
                            right:0;
                            top:0.3rem;
                            bottom:0.3rem;
                            border-right:dotted 1px #aaa;
                        }
                        p{
                            &.m1{
                                font-size: 1.28rem;
                                text-align:center;
                                line-height:2rem;
                                height:2rem;
                                font-weight:bold;
                                color:#f00;
                                i{
                                    font-size: 0.8rem;
                                    font-family:Verdana;
                                    font-weight:normal;
                                }
                            }
                            &.m2{
                                font-size: 0.533rem;
                                color: #868686;
                                text-align: center;
                                line-height: 1.2rem;
                            }
                        }
                    }
                    .inner{
                        position:relative;
                        &:before{
                            position:absolute;
                            content:'';
                            background-color:@base-color;
                            bottom:-0.82rem;
                            left:-1.05rem;
                            width:0.5rem;
                            height:0.5rem;
                            border-radius:50%;
                        }
                        &:after{
                            position:absolute;
                            content:'';
                            background-color:@base-color;
                            top:-0.82rem;
                            left:-1.05rem;
                            width:0.5rem;
                            height:0.5rem;
                            border-radius:50%;
                        }
                        p{
                            &.m1{
                                font-size:0.8rem;
                                line-height:2rem;
                                height:2rem;
                            }
                            &.m2{
                                font-size: 0.5333rem;
                                color: #868686;
                                line-height: 1.2rem;
                            }
                        }
                        .tip{
                            color:#ecb419;
                            position: absolute;
                            right:0.3rem;
                            top:50%;
                            border:1px solid #ecb419;
                            font-size: 0.53rem;
                            line-height: 1.2rem;
                            padding: 0 0.2rem;
                            border-radius: 0.2rem;
                            transform:translateY(-50%);
                        }
                    }
                }
            }
        }
        .close{
             position:absolute;
             color:#999;
             left:50%;
             margin-left:-1rem;
             bottom:-3rem;
             display:block;
             width:2rem;
             height:2rem;
             border-radius:50%;
             background:#fff;
             text-align:center;
             i{
                font-size: 1rem;
             }
             &:before{
                 content:'';
                 left:50%;
                 transform:translateX(-50%);
                 bottom:100%;
                 width:1px;
                 height:1rem;
                 background-color:#fff;
                 position:absolute;
             }
             &:active{
                 background:@base-color;
                 color:#fff;
             }
        }
    }
    &.app_dialog-enter-active,&.app_dialog-leave-active{
        transition:all ease-out 0.3s;
		.mt-master-content{
			transition:all ease-out 0.3s;
		}
    }
    &.app_dialog-enter{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translate(-50%,-50%) scale(0);
		}
    }
    &.app_dialog-enter-to,.app_dialog-leave{
        opacity: 1;
		.mt-master-content{
			opacity: 1;
			transform: translate(-50%,-50%) scale(1);
		}
    }
    &.app_dialog-leave-to{
        opacity: 0;
		.mt-master-content{
			opacity: 0;
			transform: translate(-50%,-50%) scale(0);
		}
    }
}
</style>
<style>
    .ui-banner-container .van-swipe{
        width:100%;
        height:100%;
    }
    .ui-banner-container .van-swipe__indicator--active {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #2398aa ;
    }
</style>
